﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .page-container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 4px;
    }
    .page-title {
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    .page-title h2 {
        font-size: 24px;
        font-weight: 300;
        color: #333;
    }
    .layui-form-label {
        width: 110px;
    }
    .layui-input-block {
        margin-left: 140px;
    }
    .form-actions {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .layui-form-item .layui-input-block .help-block {
        color: #999;
        font-size: 12px;
        margin-top: 5px;
    }
    .required:after {
        content: "*";
        color: red;
        margin-left: 4px;
    }
</style>

<div class="page-container">
    <div class="page-title">
        <h2><i class="layui-icon layui-icon-user"></i> 添加新用户</h2>
    </div>
    
    <form class="layui-form" method="post">
        @Html.AntiForgeryToken()
        <div class="layui-form-item">
            <label class="layui-form-label required">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="userName" required 
                       lay-verify="required" lay-reqText="请输入用户名"
                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                <div class="help-block">用户名将作为登录账号，创建后不可修改</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPassWord" id="userPassWord" required
                       lay-verify="required|password" lay-reqText="请输入密码"
                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                <div class="help-block">密码长度至少6位，必须包含字母和数字</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" id="confirmPassword" required
                       lay-verify="required|confirmPassword" lay-reqText="请确认密码"
                       placeholder="请再次输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="userNickName" id="userNickName" required
                       lay-verify="required" lay-reqText="请输入昵称"
                       placeholder="请输入昵称" autocomplete="off" class="layui-input">
                <div class="help-block">昵称将显示在系统中，方便其他用户识别</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">部门</label>
            <div class="layui-input-block">
                <select name="departmentId" id="departmentId" required
                        lay-verify="required" lay-reqText="请选择部门">
                    <option value="">请选择部门</option>
                    <option value="1">人事部</option>
                    <option value="2">市场部</option>
                    <option value="3">财务部</option>
                </select>
                <div class="help-block">请选择用户所属部门</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="userPhone" id="userPhone" required
                       lay-verify="required|phone" lay-reqText="请输入手机号"
                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
                <div class="help-block">用于接收系统通知和找回密码</div>
            </div>
        </div>

        <div class="layui-form-item form-actions">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="userForm">
                    <i class="layui-icon layui-icon-ok"></i> 确认添加
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="returnquery()">
                    <i class="layui-icon layui-icon-return"></i> 返回列表
                </button>
            </div>
        </div>
    </form>
</div>

<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        
        // 自定义表单验证规则
        form.verify({
            password: [
                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
                '密码必须至少6个字符，包含字母和数字'
            ],
            confirmPassword: function(value) {
                var password = $('#userPassWord').val();
                if(value !== password) {
                    return '两次输入的密码不一致';
                }
            },
            phone: [
                /^1[3-9]\d{9}$/,
                '请输入正确的手机号'
            ]
        });

        // 监听表单提交
        form.on('submit(userForm)', function(data) {
            var loadIndex = layer.load(1); // 显示加载动画
            
            // 表单验证
            if (!data.field.userName) {
                layer.close(loadIndex);
                layer.msg('请输入用户名', {icon: 2});
                return false;
            }
            if (!data.field.userPassWord) {
                layer.close(loadIndex);
                layer.msg('请输入密码', {icon: 2});
                return false;
            }
            if (!data.field.userNickName) {
                layer.close(loadIndex);
                layer.msg('请输入昵称', {icon: 2});
                return false;
            }
            if (!data.field.departmentId) {
                layer.close(loadIndex);
                layer.msg('请选择部门', {icon: 2});
                return false;
            }
            if (!data.field.userPhone) {
                layer.close(loadIndex);
                layer.msg('请输入手机号', {icon: 2});
                return false;
            }

            // 删除确认密码字段，因为后端不需要
            delete data.field.confirmPassword;

            // 获取防伪令牌
            var token = $('input[name="__RequestVerificationToken"]').val();

            // 构造提交数据
            var departmentName = $('#departmentId option:selected').text();
            var userData = {
                userName: data.field.userName.trim(),
                userPassWord: data.field.userPassWord,
                userNickName: data.field.userNickName.trim(),
                departmentId: data.field.departmentId,
                departmentName: departmentName,
                userPhone: data.field.userPhone.trim()
            };

            // 使用表单提交
            $.ajax({
                url: '/User/AddUser',
                type: 'POST',
                data: JSON.stringify(userData),
                contentType: 'application/json',
                headers: {
                    'RequestVerificationToken': token
                },
                success: function(response) {
                    layer.close(loadIndex);
                    if(response.success) {
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 1500
                        }, function() {
                            location.href = "/User/UserQuery";
                        });
                    } else {
                        layer.msg('添加失败', {icon: 2});
                    }
                },
                error: function(xhr) {
                    layer.close(loadIndex);
                    if (xhr.status === 400) {
                        layer.msg('方法参数错误，请检查输入是否正确', {icon: 2});
                    } else if (xhr.status === 415) {
                        layer.msg('不支持的数据格式', {icon: 2});
                    } else {
                        layer.msg('添加失败：' + (xhr.statusText || '未知错误'), {icon: 2});
                    }
                }
            });
            return false;
        });

        // 重新渲染表单
        form.render();
    });

    function returnquery() {
        layer.confirm('确定要返回列表吗？已填写的内容将不会保存', {
            icon: 3,
            title: '提示',
            btn: ['确定', '取消']
        }, function() {
            location.href = "/User/UserQuery";
        });
    }
</script>

